<template>
  <el-menu
    :default-active="activeIndex"
    router
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="/">主页</el-menu-item>
    <el-menu-item index="/Knowledge">自定义工具函数</el-menu-item>
    <el-menu-item index="/CssLib">css样式库</el-menu-item>
    <el-menu-item index="/MiniPro">小项目</el-menu-item>
    <el-menu-item index="/VueWheel">Vue组件库</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "MyMenu",
  computed: {
    activeIndex() {
      let path = this.$route.path.split("/");
      console.log(path[1]);
      return "/" + path[1];
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu {
  background-color: initial;
}
</style>
